<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-07-23 10:20:07
 * @LastEditors: jgg
 * @LastEditTime: 2022-01-19 16:14:53
-->
<template>
    <div class="wrap">
        <div class="search_table">
            <div class="search_box">
                <div class="search_wrap">
                    <div class="search_item">
                        <span style="margin-right:10px">部门:</span>
                        <el-select class="input_item" @change="onChangeDepartment" v-model="form.deptId" placeholder="选择部门">
                            <el-option
                                v-for="item in deptList"
                                :key="item.deptId"
                                :label="item.simpleName"
                                :value="item.deptId">
                            </el-option>
                        </el-select>
                    </div>
                     <div class="search_item">
                        <el-input  clearable class="input_item" v-model="form.name" placeholder="姓名"/>
                       
                    </div>
                    <div class="search_item">
                         <el-input  clearable class="input_item" v-model="form.phone" placeholder="手机号"/>
                    </div>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </div>
                <div class="btn_box">
                    <el-button @click="onAdd" class="success-btn" icon="el-icon-plus" >新增</el-button>
                </div>
            </div>
            <div class="table_box">
                <el-table
                    v-loading="loading"
                    class="el_table"
                    border
                    :data="tableData"
                    empty-text="暂无数据"
                    :height="height"
                    :show-header="true"
                    :header-cell-style="{backgroundColor:'#EEF6FF',height:'48px'}"
                    :row-class-name="tableRowClass"
                >
                    <el-table-column type="index" label="序号" width="60"></el-table-column>
                    <el-table-column
                        v-for="(item, index) in tableTitle"
                        :key="index"
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width ? item.width:''"
                        :formatter="item.formatter"
                    >
                        <template v-if="item.prop == 'status'" v-slot="scope" >
                            <span :style="{'color':scope.row.status == '0'? '#0AD100':'#FF7272'}">{{scope.row.status == '0' ? '正常':scope.row.status == '1' ?'停用':'-'}}</span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="操作" width="220">
                        <template v-slot="scope">
                            <el-button  icon="el-icon-view" type="text" size='medium' class="primary-text"  @click="onDetail(scope.row)" >查看</el-button>
                            <el-button  icon="el-icon-edit" type="text" size='medium' class="success-textbtn"  @click="onEdit(scope.$index, scope.row)" >编辑</el-button>
                            <el-button  icon="el-icon-refresh" type="text" size='medium' class="danger-textbtn"  @click="onReset(scope.$index, scope.row)" >修改密码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="el_footer"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.currPage"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="form.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="form.total">
                </el-pagination>
            </div>

        </div>
        <add @onChange="onChangeAdd" :type="type" :item="editItem" :visible="isAddShow"></add>
        <detail @onChange="onChangeDetail" :visible="isDetailShow" :item="editItem"></detail>
        <reset @onChange="onChangeReset" :item="resetItem" :visible="isResetShow"></reset>
    </div>
</template>

<script>
// import { formatTimestamp } from '@/utils/common'
import getTableHeight from '@/utils/mixins'
import add from './add.vue'
import detail from './detail.vue'
import reset from './reset.vue'
import userApi from '@/api/user'
export default {
    name: 'userManage',
    mixins:[getTableHeight],
    components:{
        add,
        reset,
        detail
    },
    data(){
        return {
            form:{
                currPage:1,
                pageSize:20,
                name:"",
                phone:'',
                deptId:'',
                total: 0
            },
            deptList:[],
            // 表格
            loading: false,
            tableData:[
                
            ],
            tableTitle: [
                {
                    prop: 'account',
                    label: '账号',
                },
                {
                    prop: 'name',
                    label: '姓名',
                },
                {
                    prop: 'phone',
                    label: '手机号'
                },
                {
                    prop: 'deptName',
                    label: '单位'
                },
                {
                    prop: 'roleName',
                    label: '角色'
                },
                {
                    prop: 'status',
                    label: '状态',
                }
            ],
            isDetailShow: false,
            // 新增编辑
            isAddShow:false,
            editItem:{},
            type:'add',

            // 重置
            isResetShow:false,
            resetItem:{},
        }
    },
    created(){
        this.getlistCombobox()
        this.getData()
    },
    methods:{
        getData(){
            this.loading = true
            userApi.getUserList({
                currPage:this.form.currPage,
                pageSize:this.form.pageSize,
                deptId:this.form.deptId,
                name:this.form.name,
                phone:this.form.phone
            }).then((res)=>{
                this.tableData = res.data.records
                this.form.total = res.data.total
                this.loading = false
            }).catch((err)=>{
                this.loading = false

            })
        },
        //搜索
        onSearch(){
            this.form.currPage = 1
            this.getData()
        },
        // 表格
        handleSizeChange(val) { // 分页
            this.form.pageSize = val
            this.form.currPage = 1
            this.getData()
        },
        handleCurrentChange(val) {
            this.form.currPage = val
            this.getData()
        },
        onChangeDepartment(res){
            this.form.townCode = res
            this.getData()
        },
        // 获取下拉数据
        getlistCombobox(){
            userApi.getlistCombobox().then((res)=>{
                if(res.data.length === 0) {
                    return
                }
                var deptList = res.data || []
                this.deptList = [{
                    deptId:'',
                    simpleName:'全部'
                },...deptList]
            }).catch((err)=>{
                this.$message.error(err.massage)
            })
        },
        onAdd(){// 新增
            this.isAddShow = true
            this.type = 'add'
            this.editItem = {}
        },
        onDetail(item){// 详情
            this.isDetailShow = true
            this.editItem = item
        },
        onChangeAdd(data){
            this.isAddShow = data.bool
            if(data.refresh){
                this.form.currPage = 1
                this.getData()
            }
        },
        onChangeDetail(data) {
            this.isDetailShow = data.bool
        },
        onChangeReset(data){
            this.isResetShow = data.bool
        },
        onEdit(index,item){// 编辑
            this.isAddShow = true
            this.type = 'edit'
            
            this.editItem = item
        },
        onReset(index,item){
            this.isResetShow = true
            this.resetItem = item
        },
    },
}
</script>
<style scoped lang="scss">
    .wrap{
        height: 100%;
    }
</style>